<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js" type="text/javascript"charset="utf-8"></script>
    </head>

    <body>
        <!-- view -->
        <div id="app">
          <todo>
            <todo-title slot="todo-title" v-bind:title="title"></todo-title>
            <todo-items slot="todo-items" v-for="(item, index) in items" 
                v-bind:item="item" v-bind:index="index"
                v-on:remove="remove(index)" v-bind:key="index"></todo-items>
                <!-- 自定义remove事件，并绑定app中的remove方法，传递参数index -->
          </todo>  
        </div>


        <script type="text/javascript">
            Vue.component("todo", {
              template: '<div>\
                           <slot name="todo-title"></slot>\
                           <ul>\
                             <slot name="todo-items"></slot>\
                           </ul>\
                         </div>'
            });

            Vue.component("todo-title", {
              props: ['title'],
              template: '<div>{{title}} <button @click="show">点击</button></div>', // click事件绑定show方法
              methods: {
                show: function () {
                  alert("绑定函数成功!");
                }
              }
            })

            Vue.component("todo-items", {
              props: ['index', 'item'],
              template: '<li>{{index}} -- {{item}} <button @click="remove">删除</button></li>',
              methods: {
                remove: function (index) {
                  // 自定义事件分发
                  this.$emit('remove', index);
                }
              }
            })

            let app = new Vue({
                el: "#app",
                data: {
                  title: "编程语言",
                  items: ["Java", "C/C++", "Python", "JavaScript"]
                },
                methods: {
                  remove: function (index) {
                    console.log("删除了"+this.items[index]+"ok");
                    this.items.splice(index, 1); // 删除指定位置的往后的一个元素
                  }
                }
            })
        </script>
    </body>
</html>